<script setup lang="ts">
import { AuthRouter } from '@/router/AuthRouter'
import { useUserInfoStore } from '@/stores/UserInfo'
import { useRoute, useRouter } from 'vue-router'

const userInfoStore = useUserInfoStore()
const router = useRouter()
const route = useRoute()

function onClickLogout() {
  userInfoStore.logout()
  AuthRouter.removeRoute(router)
  if (AuthRouter.match(route)) {
    router.replace({ name: 'Home' })
  }
}
</script>

<template>
  <div class="user-box">
    <template v-if="userInfoStore.hasLogin">
      <ADropdown :trigger="['click', 'hover']">
        <span class="username-box">{{ userInfoStore.username }}</span>
        <template #overlay>
          <AMenu>
            <AMenuItem @click="onClickLogout">退出登录</AMenuItem>
          </AMenu>
        </template>
      </ADropdown>
    </template>
    <template v-else>
      <AButton type="text" @click="router.push('Login')">登录</AButton>
    </template>
  </div>
</template>

<style lang="less" scoped>
.user-box {
  display: flex;
  justify-content: center;
  align-items: center;

  .username-box {
    cursor: pointer;
  }
}
</style>
